<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../lib/react.development.js"></script>
    <!-- //引入核心库 -->
    <script src="../lib//react-dom.development.js"></script>
    <!-- //支持react的dom操作 -->
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
        class MyComponent extends React.Component{
            state={show:true}
            change=()=>{
                let {show}=this.state
               this.setState({show:!show})
            }
            force=()=>{
                let {show}=this.state
                show=!show
                 this.forceUpdate()
                 //强制更新,相比较setstate少走了shouldcomponentupadte这步
            }
        componentWillReceiveProps(){
                console.log('componentWillReceiveProps我是父组件传递值后触发的钩子函数')
            }
            shouldComponentUpdate(){
    console.log('shouldComponentUpdate会自动调用render来更新,返回值的true和false来控制是否调用render也就是继续执行')
                return true
            }
            componentWillUpdate(){
                console.log('componentWillUpdate')
            }
            render(){
                console.log('render')
                return(
                    <div>
                        <A/>
                        <h2>我是{this.state.show ?'你爹':'你爸'}</h2>
                        <button onClick={this.change}>点我走setState更新流程</button>
                        <button onClick={this.force}>点我走forceUpdate更新流程(相比较setState流程少了一个render步骤)</button>
                        </div>
                )
            }
        }
       class A extends React.Component{
           state={
               car:'奔驰'
           }
           changeCar=()=>{
               this.setState({car:'梅里赛斯'})
            console.log(this)
           }
           render(){
               return(
                   <div>我是子组件
                    <B msg={this.state.car}/>
                    <button onClick={this.changeCar}>切换车</button>
                    </div>
               )
           }
       }
       class B extends React.Component{
           componentWillReceiveProps(props){
 console.log('当组件接收到父组件传递的值时',props,'注意该函数第一次直接传值不会触发要牵扯到传递的值发生变化时才会触发')
           }
           render(){
               console.log(this.props)
               return(
                   <div>
                    <span>我接收到了A(父组件)的值:{this.props.msg}</span>
                    </div>
               )
           }
       }
        ReactDOM.render(<MyComponent name='sav'/>,document.getElementById('test'))
        </script>
</body>
</html>